<template>
  <div>
    <el-form :inline="true" ref="queryForm" :model="query">
      <!-- 检索条件 start -->
      <el-form-item label="用户姓名" prop="memberName">
        <el-input
          clearable
          v-model="query.memberName"
          placeholder="请输入用户姓名"
          @input="querySearchForm"
        ></el-input>
      </el-form-item>
      <el-form-item label="订单编号" prop="orderSn">
        <el-input
          clearable
          v-model="query.orderSn"
          placeholder="请输入订单编号"
          @clear="querySearchForm"
        ></el-input>
      </el-form-item>
      <el-form-item label="订单状态" prop="orderStatus">
        <el-select
          v-model="query.orderStatus"
          placeholder="请选择"
          @change="querySearchForm"
        >
          <el-option label="全部（不包含已取消）" value="-1" />
          <el-option label="全部" value="" />
          <el-option label="待支付" value="0" />
          <el-option label="待发货" value="1" />
          <el-option label="待收货" value="2" />
          <el-option label="已完成" value="3" />
          <el-option label="已取消" value="4" />
        </el-select>
      </el-form-item>
      <el-form-item label="支付方式" prop="payType">
        <el-select
          v-model="query.payType"
          placeholder="请选择"
          @change="querySearchForm"
        >
          <el-option label="全部" value="" />
          <el-option label="余额" value="0" />
          <el-option label="微信" value="1" />
          <el-option label="支付宝" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="支付平台" prop="payPlatform">
        <el-select
          v-model="query.payPlatform"
          placeholder="请选择"
          @change="querySearchForm"
        >
          <el-option label="全部" value="" />
          <el-option label="移动端H5" value="0" />
          <el-option label="移动端App" value="1" />
          <el-option label="电脑端" value="2" />
          <el-option label="小程序" value="3" />
        </el-select>
      </el-form-item>
      <!-- 检索条件 end -->

      <el-form-item>
        <el-button icon="el-icon-search" @click="querySearchForm"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" @click="resetSearchForm"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-table
      stripe
      border
      :data="tableData"
      style="width: 100%"
      :height="maxTableHeight"
    >
      <!-- 表格属性 start -->
      <el-table-column prop="memberName" label="用户姓名"> </el-table-column>
      <el-table-column prop="productAmount" label="商品金额" width="120">
        <template slot-scope="{ row }">
          <span class="money">￥{{ row.productAmount | decimal }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="discountAmount" label="优惠金额" width="120">
        <template slot-scope="{ row }">
          <span class="money">￥{{ row.discountAmount | decimal }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="deliveryAmount" label="运费金额" width="120">
        <template slot-scope="{ row }">
          <span class="money">￥{{ row.deliveryAmount | decimal }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="payAmount" label="支付金额" width="120">
        <template slot-scope="{ row }">
          <span class="money">￥{{ row.payAmount | decimal }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="refundAmount" label="已退款金额" width="120">
        <template slot-scope="{ row }">
          <el-tag v-if="row.refundAmount != 0" type="info"
            >￥{{ row.refundAmount | decimal }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column prop="payTypeName" label="支付方式" width="100">
        <template slot-scope="{ row }">
          <el-tag v-if="row.payType == 0" type="info">{{
            row.payTypeName
          }}</el-tag>
          <el-tag v-if="row.payType == 1" type="success">{{
            row.payTypeName
          }}</el-tag>
          <el-tag v-if="row.payType == 2">{{ row.payTypeName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="payPlatformName" label="支付平台" width="100">
        <template slot-scope="{ row }">
          {{ row.payPlatformName || "----" }}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="170">
      </el-table-column>
      <el-table-column prop="payTime" label="支付时间" width="170">
        <template slot-scope="{ row }">
          {{ row.payTime || "----" }}
        </template>
      </el-table-column>
      <el-table-column prop="finishTime" label="完成时间" width="170">
        <template slot-scope="{ row }">
          {{ row.finishTime || "----" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="orderStatusName"
        label="订单状态"
        width="140"
        align="center"
      >
        <template slot-scope="{ row }">
          <el-tag :type="showTagType(row)">{{ row.orderStatusName }}</el-tag>
          <el-tag v-if="row.hasUnhandledRefund" type="danger"
            >有退款待处理</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="orderStatusName"
        label="操作"
        width="100"
        align="center"
      >
        <template slot-scope="{ row }">
          <el-button
            type="text"
            size="medium"
            v-if="row.operateBtn.showConsignBtn"
            @click="openExpressDialog(row)"
            >发货</el-button
          >
          <el-button
            type="text"
            size="medium"
            v-if="row.operateBtn.showHandleRefundBtn"
            @click="openRefundDialog(row)"
            >处理退款</el-button
          >
          <el-button
            type="text"
            size="medium"
            v-if="row.operateBtn.showHandleReturnBtn"
            @click="openReturnDialog(row)"
            >处理退款</el-button
          >
          <el-button
            type="text"
            size="medium"
            v-if="row.operateBtn.updateDeliveryBtn"
            @click="openExpressDialog(row)"
            >编辑快递</el-button
          >
        </template>
      </el-table-column>
      <!-- 表格属性 end -->
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.page"
      :page-sizes="[10, 20, 50]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>

    <UpdateExpress ref="updateExpressDialog" dialogTitle="物流"></UpdateExpress>
    <OrderRefund
      ref="orderRefundDialog"
      dialogTitle="处理售前退款"
    ></OrderRefund>
    <OrderReturn
      ref="orderReturnDialog"
      dialogTitle="处理售后退款"
    ></OrderReturn>
  </div>
</template>

<script>
import { mapState } from "vuex";
import listMixins from "@/views/base/listMixins";

// 请求接口 start
import orderApi from "@/api/orderApi";
import UpdateExpress from "@/views/order/order/updateExpress.vue";
import OrderRefund from "@/views/order/order/orderRefund.vue";
import OrderReturn from "@/views/order/order/orderReturn.vue";
// 请求接口 end

export default {
  // 组件名称 start
  name: "orderList",
  // 组件名称 start
  mixins: [listMixins],
  components: {
    UpdateExpress,
    OrderRefund,
    OrderReturn,
  },
  data() {
    return {
      // 数据 start
      permission: {
        delivery: "order:order:delivery",
      },
      query: {
        memberName: "",
        orderSn: "",
        orderStatus: "-1",
        payType: "",
        payPlatform: "",
      },
      // 数据 end
    };
  },
  methods: {
    // 处理售前退款弹框
    openRefundDialog(row) {
      this.$refs["orderRefundDialog"].open(row);
    },
    // 处理售后退款弹框
    openReturnDialog(row) {
      this.$refs["orderReturnDialog"].open(row);
    },
    // 发货弹框
    openExpressDialog(row) {
      this.$refs["updateExpressDialog"].setMeta({
        order: row,
        orderId: row.id,
      });
      this.$refs["updateExpressDialog"].openSave();
    },
    // 显示订单状态tag
    showTagType(row) {
      if (row.orderStatus == 0) {
        return "danger";
      }
      if (row.orderStatus == 1 || row.orderStatus == 2) {
        return "warning";
      }

      if (row.orderStatus == 3 || row.orderStatus == 4) {
        return "success";
      }
      return "";
    },
    remoteTableData() {
      // 分页请求 start
      orderApi.order.listPage(this.searchParams()).then((res) => {
        this.updateTableData(res.data);
      });
      // 分页请求 end
    },
  },
  computed: mapState({
    user: (state) => state.user.userInfo,
  }),
};
</script>

<style lang="less" scoped>
.money {
  color: #fa2c19;
}
.el-tag {
  margin-bottom: 5px;
}
</style>